<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <FormItemVue
      v-for="(item, index) in formComDef"
      v-model:value="formValue[item.formKey]"
      :key="index"
      :itemConfig="item"
    ></FormItemVue>
    <a-button block type="primary" html-type="submit">测试</a-button>
  </a-form>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import FormItemVue from '@/components/FormItem/FormItem.vue'
import { Input, Select } from 'ant-design-vue'
import { FormView } from '@/components/FormItem/FormItemClass/FormView'
import { ViewDef } from '@/components/FormItem/FormItemClass/ViewDef'

const props = defineProps({
  id: String
})

const formState = reactive({
  name: '',
  area: ''
})

onMounted(() => {})

const inputChange = (val) => {}
const pressEnter = () => {
  console.log('passEnter')
}

const itemConfig = [
  {
    type: Input,
    label: '活动名称',
    formKey: 'name'
  }
]
const form = new FormView(new ViewDef(itemConfig))

form.reloadFormData({ name: '2222' })

const formValue = form.formData

const formComDef = form.viewDef.componentDefs
</script>

<style scoped></style>
